<template>
  <div>
    <div id="left1"></div>
    <!-- Left1 -->
  </div>
</template>

<script>
import { Column } from '@antv/g2plot';
export default {
  data(){
    return {}
  },
  methods:{
    myAntv(){
      let data = [
        {
          type: '18岁及以下',
          sales: 0.05,
        },
        {
          type: '25岁',
          sales: 0.15,
        },
        {
          type: '30岁',
          sales: 0.2,
        },
        {
          type: '35岁',
          sales: 0.29,
        },
        {
          type: '40岁',
          sales: 0.16,
        },
        {
          type: '45岁',
          sales: 0.15,
        },
        {
          type: '50岁及以上',
          sales: 0.1,
        },
      ];

      let columnPlot = new Column('left1', {
        data,
        xField: 'type',
        yField: 'sales',
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          type: {
            alias: '年龄段',
          },
          sales: {
            alias: '比例值',
          },
        },
      });
      columnPlot.changeSize(100, 100);
      columnPlot.render();
    }
  },
  created(){

  },
  mounted(){
    this.myAntv();
  }
}
</script>
<style lang="scss" scoped>

</style>